<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EasyLanNetdisk</title>
    <style>
/* 1. 全局背景渐变动画 */
body {
    background: linear-gradient(45deg, #ffffff, #f0f0f0);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. 标题文字渐变动画 */
.header h1 {
    background: linear-gradient(90deg, #2a5caa, #007bff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: textGradient 8s ease infinite;
}

@keyframes textGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 3. 存储信息卡片呼吸动画 */
.storage-info {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    animation: cardBreathe 4s infinite ease-in-out;
    clear: both;
    color: #333;
}

/* 2. 标题文字渐变动画 */
.header h1 {
    background: linear-gradient(90deg, #ffffff, #e0e0e0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: textGradient 8s ease infinite;
}

@keyframes cardBreathe {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 123, 255, 0.2); }
    50% { box-shadow: 0 0 20px rgba(0, 123, 255, 0.4); }
}

/* 4. 文件列表项悬停发光效果 */
li:hover {
    transform: translateX(10px);
    background-color: #e9e9e9;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(42, 92, 170, 0.3);
    transition: all 0.3s ease;
}

/* 5. 上传按钮颜色渐变 */
#uploadForm button[type='submit'] {
    background: linear-gradient(90deg, #2a5caa, #007bff);
    animation: buttonGradient 3s infinite alternate;
}

@keyframes buttonGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* 6. 进度条颜色动画 */
.progress-bar {
    height: 20px;
    background: linear-gradient(90deg, #007bff, #28a745);
    background-size: 200% 100%;
    width: 0%;
    text-align: center;
    line-height: 20px;
    color: white;
    border-radius: 4px;
    transition: width 0.3s ease, background-position 0.5s ease;
}

.progress-bar:hover {
    background-position: 100% 0;
}

/* 7. 选择框边框渐变 */
select {
    border: 2px solid transparent;
    background-image: linear-gradient(white, white), linear-gradient(90deg, #007bff, #2a5caa);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: all 0.3s;
}

select:hover {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* 8. 链接文字颜色过渡 */
a {
    color: #007BFF;
    text-decoration: none;
    background: linear-gradient(to right, #007BFF, #007BFF);
    background-position: bottom;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

a:hover {
    color: #2a5caa;
    background-size: 100% 2px;
}

/* 9. 版本信息小字体样式 */
.version-small {
    font-size: 0.6em;
    font-weight: normal;
    opacity: 0.8;
    margin-left: 10px;
    animation: textBreathe 3s infinite ease-in-out;
}

@keyframes textBreathe {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }
}

/* 10. 登出按钮悬停放大 */
.logout-btn {
    background-color: white;
    color: #007BFF;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    float: right;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logout-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

/* 11. 文件容器阴影渐变 */
.files-container {
    background-color: #f5f6f9;
    padding: 1.5rem;
    margin: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: containerShadow 5s infinite alternate;
}

@keyframes containerShadow {
    0% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    100% { box-shadow: 0 2px 20px rgba(42, 92, 170, 0.2); }
}

/* 12. 重命名按钮渐变效果 */
button[onclick^="renameFile"] {
    background: linear-gradient(90deg, #ffc107, #fd7e14);
    color: white;
    border: none;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    margin-right: 5px;
}

button[onclick^="renameFile"]:hover {
    background-position: 100% 0;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

/* 13. 删除按钮渐变效果 */
.delete-btn {
    background: linear-gradient(90deg, #dc3545, #c82333);
    color: white;
    padding: 0.3rem 0.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.delete-btn:hover {
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
}

/* 14. 上传信息文本渐变 */
#uploadInfo {
    background: linear-gradient(90deg, #6c757d, #343a40);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: infoGradient 10s infinite;
}

@keyframes infoGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 15. 整体页面载入渐变 */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    animation: pageFadeIn 1s ease-out;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 16. 标题区域底部渐变边框 */
.header {
    background-color: #2a5caa;
    color: white;
    padding: 1rem;
    text-align: left;
    position: relative;
}

.header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #2a5caa, #007bff);
    background-size: 200% 100%;
    animation: borderGradient 5s infinite;
}

@keyframes borderGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 17. 文件分类标题渐变 */
h3 {
    color: #666;
    margin-top: 2rem;
    background: linear-gradient(90deg, #2a5caa, #6c757d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 100%;
    animation: categoryGradient 8s infinite;
}

@keyframes categoryGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 18. 文件项图标渐变效果 */
li::before {
    content: '📄';
    margin-right: 8px;
    animation: iconColor 3s infinite alternate;
}

@keyframes iconColor {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* 19. 进度容器发光效果 */
.progress-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 4px;
    margin: 1rem 0;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
    animation: progressGlow 3s infinite alternate;
}

@keyframes progressGlow {
    0% { box-shadow: 0 0 5px rgba(0, 123, 255, 0.2); }
    100% { box-shadow: 0 0 15px rgba(0, 123, 255, 0.4); }
}

/* 20. 文件数量统计渐变 */
.files-count {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1rem;
    animation: countPulse 4s infinite ease-in-out;
}

/* 上传按钮文本颜色 */
#uploadForm button {
    color: white;
}
        @keyframes countPulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; color: #2a5caa; }
        }
    </style>
    </style>
</head>
<body>
    <div class="header">
        <h1>ELN <span class="version-small">1.0.5</span></h1>
        <a href="{{ url_for('logout') }}" class="logout-btn">退出登录</a>
        <div class="storage-info">
            <p>总空间: {{ '%.2f'|format(total_space / 1024 / 1024 / 1024) }} GB</p>
            <p>已用空间: {{ '%.2f'|format(used_space / 1024 / 1024 / 1024) }} GB</p>
            <p>剩余空间: {{ '%.2f'|format(remaining_space / 1024 / 1024 / 1024) }} GB</p>
        </div>
    </div>
    <div class="files-container">
        <h2>文件列表</h2>
        <div class="files-count">共 {{ files|length }} 个账户，{{ files.values()|map('select', '!=', 'FA.txt')|map('list')|map('length')|sum }} 个文件</div>

        <form action="{{ url_for('upload') }}" method="post" enctype="multipart/form-data" id="uploadForm">
            <label for="family_name">选择家人分类:</label>
            <select id="family_name" name="family_name" required>
                {% for family in files.keys() %}
                    <option value="{{ family }}">{{ family }}</option>
                {% endfor %}
            </select>
            <label for="file">选择文件:</label>
            <input type="file" id="file" name="file" multiple required>
            <button type="submit">上传文件</button>
        </form>
        <div class="progress-container">
            <div class="progress-bar" id="progressBar">0%</div>
        </div>
        <div id="uploadInfo">上传速度: -- KB/s | 已上传: -- KB | 剩余: -- KB</div>
        <br>
        {% for family, file_list in files.items() %}
            <h3>{{ family }}</h3>
            <ul>
                {% for file in file_list %}
                    {% if file != 'FA.txt' %}
                        <li><a href="{{ url_for('download', family_name=family, file_name=file) }}">{{ file }}</a>
                        <button onclick="renameFile('{{ family }}', '{{ file }}')">重命名</button>
                        <button class="delete-btn" onclick="confirmDelete('{{ url_for('delete', family_name=family, file_name=file) }}')">删除</button>
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
        {% endfor %}
    </div>
    <script>
/**
 * 重命名文件函数
 * @param {string} family - 家人分类名称
 * @param {string} fileName - 文件名
 */
function renameFile(family, fileName) {
    const fileExtension = fileName.split('.').pop();
    const nameWithoutExtension = fileName.slice(0, -(fileExtension.length + 1));
    const newName = prompt('请输入新文件名:', nameWithoutExtension);
    if (newName) {
        const newFileName = newName + '.' + fileExtension;
        const form = document.createElement('form');
        form.method = 'post';
        form.action = '{{ url_for('rename') }}';
        const oldNameInput = document.createElement('input');
        oldNameInput.type = 'hidden';
        oldNameInput.name = 'old_name';
        oldNameInput.value = `${family}/${fileName}`;
        const newNameInput = document.createElement('input');
        newNameInput.type = 'hidden';
        newNameInput.name = 'new_name';
        newNameInput.value = `${family}/${newFileName}`;
        form.appendChild(oldNameInput);
        form.appendChild(newNameInput);
        document.body.appendChild(form);
        form.submit();
    }
}

/**
 * 确认删除文件函数
 * @param {string} url - 删除文件的请求地址
 */
function confirmDelete(url) {
    if (confirm('确定要删除这个文件吗？')) {
        const form = document.createElement('form');
        form.method = 'post';
        form.action = url;
        document.body.appendChild(form);
        form.submit();
    }
}

// 单位转换函数
function convertSize(bytes) {
    if (bytes < 1024) {
        return `${bytes.toFixed(2)} B`;
    } else if (bytes < 1024 * 1024) {
        return `${(bytes / 1024).toFixed(2)} KB`;
    } else if (bytes < 1024 * 1024 * 1024) {
        return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
    } else {
        return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
    }
}

// 新增上传进度处理逻辑
/**
 * 为上传表单添加提交事件监听器，处理文件上传和进度显示
 */
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const form = this;
    // 优化 FormData 收集
    const formData = new FormData();
    const inputs = form.querySelectorAll('input, select');
    inputs.forEach(input => {
        if (input.type === 'file') {
            for (let i = 0; i < input.files.length; i++) {
                formData.append(input.name, input.files[i]);
            }
        } else {
            formData.append(input.name, input.value);
        }
    });
    const xhr = new XMLHttpRequest();
    xhr.open('POST', form.action, true);
    // 启用 keepalive 以优化连接
    xhr.setRequestHeader('Connection', 'keep-alive');
    // 启用 Gzip 压缩
    xhr.setRequestHeader('Accept-Encoding', 'gzip');
    // 设置响应类型为 blob，优化大文件传输
    xhr.responseType = 'blob';
    // 启用异步传输优化
    xhr.timeout = 30000; // 设置超时时间为 30 秒
    xhr.upload.timeout = 30000; // 设置上传超时时间为 30 秒
    xhr.upload.startTime = Date.now();
    xhr.upload.lastLoaded = 0;
    xhr.upload.lastUpdateTime = Date.now();
    xhr.upload.lastUpdateLoaded = 0;
    // 启用跨域凭证
    xhr.withCredentials = true;

    xhr.upload.addEventListener('progress', function(event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            document.getElementById('progressBar').style.width = percentComplete + '%';
            document.getElementById('progressBar').textContent = Math.round(percentComplete) + '%';
            
            const currentTime = Date.now();
            if (currentTime - xhr.upload.lastUpdateTime >= 1000) { // 改为1秒更新一次
                const elapsedTime = (currentTime - xhr.upload.lastUpdateTime) / 1000; // 转换为秒
                const uploadedSize = event.loaded;
                const remainingSize = event.total - event.loaded;
                const uploadSpeed = (event.loaded - xhr.upload.lastUpdateLoaded) / elapsedTime;

                document.getElementById('uploadInfo').textContent = `上传速度: ${convertSize(uploadSpeed)}/s | 已上传: ${convertSize(uploadedSize)} | 剩余: ${convertSize(remainingSize)}`;

                xhr.upload.lastUpdateTime = currentTime;
                xhr.upload.lastUpdateLoaded = event.loaded;
            }
        }
    });
    
    xhr.onreadystatechange = function() {
        try {
            if (xhr.readyState === 4 && xhr.status === 200) {
                window.location.href = '{{ url_for('index') }}';
            }
        } catch (error) {
            console.error('文件上传状态处理出错:', error);
        }
    };
    
    try {
        xhr.send(formData);
    } catch (error) {
        console.error('文件上传出错:', error);
    }
});
    </script>
</body>
</html>
